<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>宽度自适应</title>
	<link rel="stylesheet" type="text/css" href="../css/style4.css">
  <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
   <script type="text/javascript" src="../js/picturefill.js"></script>   
   <script type="text/javascript" src="../js/swipe.js"></script>                    
</head>
<body id="top">
	<div class="container">
      <header id="header">
        <h3>页头</h3>
      </header>
      <a href="#navigation" class="open toggle-btn"><i class="fa fa-align-justify"></i></a>


      <nav id="navigation">
        <ul>
        	<li><a href="#" class="active">项目 1</a></li>
        	<li><a href="#">项目 2</a></li>
        	<li><a href="#">项目 3</a></li>
        	<li><a href="#">项目 4</a></li>
        	<li><a href="#">项目 5</a></li>
        </ul>
        <a href="#top" class="close toggle-btn"><i class="fa fa-times"></i></a>
      </nav>
      <div id="showcase">
        <!-- <span data-picture data-alt="星空">
          <span data-src="images/outlook_mobile.jpg" ></span>
          <span data-src="images/blek-image.jpg" data-media="(max-width:480px)"></span>
          <span data-src="images/960bg.jpg" data-media="(max-width:480px) and (-webkit-min-device-pixel-ratio:2)"></span> -->

        <!-- </span> -->
          <div id='slider' class='swipe'>
            <div class='swipe-wrap'>
              <div><img src="../images/01.jpg" alt=""/></div>
              <div><img src="../images/02.jpg" alt=""/></div>
              <div><img src="../images/03.jpg" alt=""/></div>
            </div>
            <div class="slider-control">
              <button class="left" onclick="mySwipe.prev()"><i class="fa fa-chevron-circle-left"></i></button>
              <button class="right" onclick="mySwipe.next()"><i class="fa fa-chevron-circle-right"></i></button>
            </div>
          </div>
          <script type="text/javascript">
            window.mySwipe = Swipe(document.getElementById('slider'));
          </script>
      </div>
      <section id="mainbody">
        <h3>主体</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</p>
      </section>
      <aside id="sidebar">
        <h3>边栏</h3> 
        <p>Donec dolor arcu, interdum sed turpis faucibus, placerat ultricies felis. Donec pulvinar gravida rhoncus. Suspendisse vestibulum est eget dolor lobortis.</p></aside>
      <footer id="footer">
        <h3>页脚</h3>
      </footer>
    </div>
</body>
</html>